<template>
	<view class="head">
		<view class="head-con">
			<view class="con-left">
				<view class="con-img">
					<view class="con-img-view">
						<image :src="userInfo.head"></image>
					</view>
				</view>
				<view class="con-center">
					<view class="con-nickname">
						<text>{{userInfo.nickname}}</text>
					</view>
					<view class="con-username">
						<view class="left-text">
							<text>UID:</text>
							<text>{{userInfo.username}}</text>
						</view>
						<view class="right-img">
							<image :src="cpImg" @click="copeUsername"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="con-more">
				<image :src="gomoreImg" @click="goHomePage"></image>
			</view>
		</view>
	<!-- 	<view class="head-zw"></view> -->
	</view>
</template>

<script>
	import myTitle from '@/components/common/my-title/my-title.vue'

	export default {
		props: ['userInfo'],
		components: {
			myTitle
		},
		data() {
			return {
				cpImg: require('@/static/img/main/my/index/copy.svg'),
				gomoreImg: require('@/static/img/common/goMore.svg'),
				bgColor: '#fff',
				headHight: '100'
			}
		},
		methods: {
			//复制账号
			copeUsername() {
				uni.setClipboardData({
					data: this.userInfo.username,
					success: () => {
						uni.showToast({
							title: '复制成功'
						})
					}
				})
			},
			//跳转我的首页
			goHomePage() {
				uni.navigateTo({
					url: '/subpkg/main/my/user/user-info/user-info'
				})
			}
		},
		created() {
			//console.log(this.userInfo)
		}
	}
</script>

<style scoped lang="scss">
	.head {
		padding-top: var(--status-bar-height);
		
		.head-con {
			display: flex;
			height: 140rpx;
			// background-color: #23D754;
			

			.con-left {
				width: 80%;
				display: flex;

				.con-img {
					.con-img-view {
						// width: 100rpx;
						// height: 100rpx;
						// box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
						// background-color: #fff;
						text-align: center;
						border-radius: 15rpx;
						margin: 20rpx 20rpx 0 30rpx;

						image {
							// margin-top: 6rpx;
							width: 100rpx;
							height: 100rpx;
							border-radius: 15rpx;
							box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
						}
					}
				}

				.con-center {

					.con-nickname {
						height: 80rpx;
						line-height: 80rpx;
						font-size: 38rpx;
						// color: #fff;
					}

					.con-username {
						height: 40rpx;
						line-height: 40rpx;
						display: flex;
						font-size: 28rpx;
						// color: #fff;

						.right-img {
							image {
								margin-left: 20rpx;
								// margin-top: 5rpx;
								width: 40rpx;
								height: 40rpx;
							}
						}
					}

				}


			}


			.con-more {
				width: 20%;
				text-align: right;
				margin-right: 20rpx;

				image {
					margin-top: 30rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}

	.head-zw {
		height: 60rpx;
		// border-radius: 0 0 100rpx 100rpx;
		background-color: #23D754;
	}
</style>
